<template>
  <a-modal :visible="visible" :title='title' @cancel="() => { $emit('cancel') }"
           @ok="() => { $emit('create') }" :destroyOnClose="true" :maskClosable="false">
    <a-form :form="form" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="id" class="hidden">
        <a-input disabled v-decorator="['id']"/>
      </a-form-item>
      <a-form-item label="pId" class="hidden">
        <a-input disabled v-decorator="['pId']"/>
      </a-form-item>
      <a-form-item label="pId" class="hidden">
        <a-input disabled v-decorator="['projectId']"/>
      </a-form-item>
      <a-form-item label="order" class="hidden">
        <a-input disabled v-decorator="['order']"/>
      </a-form-item>
      <a-form-item label="iconSkin" class="hidden">
        <a-input disabled v-decorator="['iconSkin']"/>
      </a-form-item>
      <a-form-item label="接口/目录名称">
        <a-input placeholder="请输入接口名称" v-decorator="['name', { rules: [
            { required: true, message: '请输入接口名称' },
            { max: 20, message: '接口名称不得超过20位' }
            ]}]"/>
      </a-form-item>
      <a-form-item label="创建类型">
        <a-radio-group
            v-decorator="[
              'isParent',
              {
                rules: [
                { required: true, message: '请选择接口类型' },
                ],
                initialValue: true
              },
            ]">
          <a-radio :value='false'>接口</a-radio>
          <a-radio :value='true'>目录</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  name: 'ApiForm',
  props: ['visible', 'title'],
  data () {
    return {
      form: this.$form.createForm(this, { name: 'api' })
    }
  }
}
</script>

<style scoped lang="less">
.hidden {
  display: none;
}

/deep/ .ant-modal {
  padding-left: 80px;
}
</style>
